/**
 * @module 会员充值
 * @author xiongsha
 * @date 2021-01-06 21:37:42
 */

import React, { useState, useEffect } from 'react';
import HeaderComponent from '@src/pages/components/Header';
import ListItem from '@src/components/ListItem';
import { Tabs, Toast } from 'antd-mobile';
import { wxPay } from '@src/utils/wechat';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request';

interface IList {
  content?: string;
  created_at?: string;
  duration?: string;
  id?: number;
  logo?: string;
  name?: string;
  price?: string;
  updated_at?: string;
}
const Vip: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
  const [list, setList] = useState<IList[]>([]);

  const getList = () => {
    request('get', '/api/v1/vip').then((res) => {
      if (res && res.code === 200) {
        setList(res.data);
      }
    });
  };
  useEffect(() => {
    getList();
  }, []);
  const pay = (id) => {
    request('post', '/api/v1/wechat_pay_vip', {
      vip_id: id,
    }).then((res) => {
      if (res && res.code === 200) {
        if (res && res.code === 200) {
          // 微信支付
          wxPay(res.data, '/');
        }
      }
    });
  };
  return (
    <div>
      <HeaderComponent text="会员充值" />
      {list.map((cur) => (
        <ListItem
          title={cur.name}
          key={cur.id}
          btnText={`¥${cur.price}`}
          remark={cur.content}
          pay={() => pay(cur.id)}
        ></ListItem>
      ))}
    </div>
  );
};
export default Vip;
